<script src="${rc.getContextPath()}/manage/js/echarts/echarts.js" type="text/javascript"></script>
<#include "/common/pagerForm.html">
<style>
.leftBar .j-first {
    display: none;
}

.leftBar .j-num {
    display: none;
}

.leftBar .j-last {
    display: none;
}

.leftBar .jumpto {
    display: none;
}

.oeeSearch label {
    width: 70px;
}

.oeeSearch ul.searchContent li {
    width: 230px;
}

.leftOee {
    border-color: #d8dfe5;
    border-style: solid;
    border-width: 1px 1px 0 0;
    float: left;
    display: block;
    overflow: auto;
    width: 280px;
    background: #fff;
}

.charBox {
    margin-left: 280px;
    border-color: #d8dfe5;
    border-style: solid;
    border-width: 1px 0 0 0;
}

.char {
    height: 200px;
    margin: 0;
    padding: 0;
}

.charBox .first {
    float: left;
    width: 25%;
}

.charBox .second {
    float: left;
    width: 25%;
}

.charBox .third {
    float: left;
    width: 25%;
}

.charBox .fourth {
    margin-left: 76%;
}

.pieBox {
    margin-left: 280px;
    margin-top: 5px;

}

.pieBoxBorder
{
    border-color: #d8dfe5;
    border-style: solid;
    border-width: 1px 0 0 0;
}

.pie {
    width: 50%;
    float: left;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 5px;
}

.pieborder {
border-color: #d8dfe5;
border-style: dashed;
border-width: 1px;
}

.tb {
    width: 49%;
    margin-left: 51%;
    padding: 5px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#tip {
	position: absolute;
	left: 50%;
	top: 50%;
}
</style>
<form rel="pagerForm" method="post" action="" class="required-validate" onsubmit="return navTabSearch(this)">
    <div class="pageHeader">
        <div class="searchBar oeeSearch">
            <ul class="searchContent">
                <li><label> <@label key='equipmentCode.C,colon'>设备编号：</@label> </label> <input type="text" name="equipmentCode" value="${condition.equipmentCode!''}" />
                </li>
                <li><label> <@label key='equipmentText.C,colon'>设备描述：</@label> </label> <input type="text" name="equipmentText" value="${condition.equipmentText!''}" />
                </li>
                <li><label><@label key="theDate.C,colon">作业日期：</@label></label> <input id="theDateSt" type="text" readonly="readonly" style="background-color: #fff;" name="theDateSt" dateFmt="yyyy-MM-dd" class="date required" value="<#if (condition.theDateSt)??>${condition.theDateSt?string("yyyy-MM-dd")}</#if>" /> <a class="inputDateButton" href="javascript:;"><@label key="select.B">选择</@label></a></li>
                <li><label><@label key="to.C,colon">至：</@label></label> <input id="theDateEd" type="text" readonly="readonly" style="background-color: #fff;" name="theDateEd" dateFmt="yyyy-MM-dd" class="date required" value="<#if (condition.theDateEd)??>${condition.theDateEd?string("yyyy-MM-dd")}</#if>" /> <a class="inputDateButton" href="javascript:;"><@label key="select.B">选择</@label></a></li>
                <li class="query">
                    <div class="buttonActive">
                        <div class="buttonContent">
                            <button type="submit"><@label key="query.B">查询</@label></button>
                        </div>
                    </div></li>
            </ul>
        </div>
    </div>
    <div class="pageContent">
        <div class="leftOee">
            <table class="table" width="100%" layoutH="100" style="overflow: scroll;">
                <thead>
                    <tr>
                        <th width="100"><@label key="equipmentCode.C">设备编号</@label></th>
                        <th width="100"><@label key="equipmentText.C">设备描述</@label></th>
                        <th width="50"><@label key="oee.C">OEE</@label></th>
                    </tr>
                </thead>
                <tbody>
                    <#if page??><#if (page.data?size>0)> <#list page.data as result>
                    <tr target="result_id" rel="${result.equipmentCode!''}" onclick="eqSelect(${result.json})">
                        <td>${result.equipmentCode!''}</td>
                        <td>${result.equipmentText!''}</td>
                        <td><#if (result.oee??)>${(result.oee*100)?string('#.##')}%<#else> <span style="color: red; line-height: 25px;">*</span></#if></td>
                    </tr>
                    </#list> <#else>
                    <tr target="scheduledTime_id">
                        <td colspan="6" class="noData">======<@label key="noListData.C">列表无数据</@label>=====</td>
                    </tr>
                    </#if> <#else>
                    <tr target="scheduledTime_id">
                        <td colspan="6" class="noData">======<@label key="noListData.C">列表无数据</@label>=====</td>
                    </tr>

                    </#if>

                </tbody>
            </table>
            <div class="panelBar leftBar" style="width: 280px">
                <#if page??>
                <div class="pages">
                    <span><@label key="pagePanelShow.C">显示</@label></span> <select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})"> <#list [10,20,30,50,100,200] as page_size> <#if (page.numPerPage)==page_size>
                        <option value="${page_size}" selected="selected">${page_size}</option> <#else>
                        <option value="${page_size}">${page_size}</option> </#if> </#list>
                    </select> <span><@label key="pagePanelMiddle.C">共</@label></span><span> <#if page.totalCount??>${page.totalCount?c}<@label key="item.C">条</@label></span></#if>
                </div>
                <div class="pagination" targetType="navTab" totalCount="<#if page.totalCount??>${page.totalCount?c}</#if>" numPerPage="<#if page.numPerPage??>${page.numPerPage?c}</#if>" pageNumShown="5" currentPage="<#if page.pageNum??>${page.pageNum?c}</#if>"></div>
                </#if>
            </div>

        </div>
        <div class="charBox">
            <div class="char first" id="oee"></div>
            <div class="char second" id="available"></div>
            <div class="char third" id="performance"></div>
            <div class="char fourth" id="quality"></div>
        </div>
        <div id="tip"><@label key="oeePleaseClick.C">请点击左侧设备查看OEE报表</@label></div>
        <div class="pieBox" id="pieBox">
            <div class="pie">
                <div layoutH="265" id="pie"></div>
            </div>
            <div class="tb" >
            <div layoutH="260" id="tb"></div>
            </div>

        </div>
    </div>
</form>

<script type="text/javascript">
Date.prototype.Format = function(fmt) { //author: meizz   
    var o = {
        "M+" : this.getMonth() + 1, //月份   
        "d+" : this.getDate(), //日   
        "h+" : this.getHours(), //小时   
        "m+" : this.getMinutes(), //分   
        "s+" : this.getSeconds(), //秒   
        "q+" : Math.floor((this.getMonth() + 3) / 3), //季度   
        "S" : this.getMilliseconds()
    //毫秒   
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
                .substr(4 - RegExp.$1.length));
    for ( var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k])
                    : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
};
    
    var option;
    require.config({
        paths : {
            echarts : '${rc.getContextPath()}/manage/js/echarts'
        }
    });
    require([ 'echarts', 'echarts/theme/blue','echarts/theme/oeemacarons', 'echarts/chart/gauge','echarts/chart/pie'

    ], function(ec, theme) {
         var oeeChart = ec.init(document.getElementById('oee'),theme);
         option = {
            series : [ {
                    type : 'gauge',
                    detail : {
                        formatter : '{value}%',
                           textStyle: {
                                color: 'auto',
                                fontSize : 15
                            }
                    },
                    data : [
                    ]
                } ],
                title:
                {
                    text:"",
                    x:'center',
                    y:'bottom'
                },
                legend: {
                    orient : 'vertical',
                    x : 'left',
                    data:[]
                },
                tooltip : {
                    trigger: 'item',
                   // formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
            noDataLoadingOption:{
                text :"<@label key='oeeNoData.C'>OEE暂无数据</@label>",
                effect : 'whirling',
                   effectOption:{
                   backgroundColor:"#fff"
               },
               textStyle : {
             fontSize : 20
               }
            }
        };
    
    
    });

    
    function eqSelect(eq)
    {
        $('#pieBox',navTab.getCurrentPanel()).addClass("pieBoxBorder");
        $('#tip', navTab.getCurrentPanel()).attr('style','display: none;');
        option.series[0].radius=[0, '75%'];
        option.series[0].center=['50%', '50%'];
        option.title.text="O:OEE";
        option.title.subtext="";
        option.title.x="center";
        option.title.y="bottom";
        option.series[0].type='gauge';
        option.tooltip.formatter="{c}%";
        option.legend.data=[];
        if(eq.oee!="null")
            {
             var o=(Number(eq.oee)*100).toFixed(2);
             option.series[0].data =[{value: o, name: ''}];
             require('echarts').init(document.getElementById('oee'),require('echarts/theme/oeemacarons')).setOption(option,true);
            }
        else
            {
            option.series[0].data=[];
            option.noDataLoadingOption.text=eq.oeeWarn;
            option.noDataLoadingOption.textStyle.fontSize=5;
             require('echarts').init(document.getElementById('oee'),require('echarts/theme/oeemacarons')).setOption(option,true);
            }
        option.title.text="A:<@label key='availableRate.C'>可用率</@label>";
        if(eq.availableRate!="null")
        {
         var o=(Number(eq.availableRate)*100).toFixed(2);
         option.series[0].data =[{value: o, name: ''}];
         require('echarts').init(document.getElementById('available'),require('echarts/theme/oeemacarons')).setOption(option,true);
        }
    else
        {
        option.series[0].data=[];
        option.noDataLoadingOption.text=eq.availableRateWarn;
        option.noDataLoadingOption.textStyle.fontSize=5;
         require('echarts').init(document.getElementById('available'),require('echarts/theme/oeemacarons')).setOption(option,true);
        }
        option.title.text="P:<@label key='performanceRate.C'>表现性</@label>";
        if(eq.performanceRate!="null")
        {
         var o=(Number(eq.performanceRate)*100).toFixed(2);
         option.series[0].data =[{value: o, name: ''}];
         require('echarts').init(document.getElementById('performance'),require('echarts/theme/oeemacarons')).setOption(option,true);
        }
    else
        {
        option.series[0].data=[];
        option.noDataLoadingOption.text=eq.performanceRateWarn;
        option.noDataLoadingOption.textStyle.fontSize=5;
         require('echarts').init(document.getElementById('performance'),require('echarts/theme/oeemacarons')).setOption(option,true);
        }
        option.title.text="Q:<@label key='qualityRate.C'>良品率</@label>";
        if(eq.qualityRate!="null")
        {
         var o=(Number(eq.qualityRate)*100).toFixed(2);
         option.series[0].data =[{value: o, name: ''}];
         require('echarts').init(document.getElementById('quality'),require('echarts/theme/oeemacarons')).setOption(option,true);
        }
    else
        {
        option.series[0].data=[];
        option.noDataLoadingOption.text=eq.qualityRateWarn;
        option.noDataLoadingOption.textStyle.fontSize=5;
         require('echarts').init(document.getElementById('quality'),require('echarts/theme/oeemacarons')).setOption(option,true);
        }
        
        $.DWZajax({
            url : hostUrl + "/emOee/getShutDownCause",
            data : {
                'equipmentCode' : eq.equipmentCode,
                'theDateSt':$('#theDateSt', navTab.getCurrentPanel()).val(),
                'theDateEd':$('#theDateEd', navTab.getCurrentPanel()).val()
            },
            callback : function(data) {
                var detail = eval(data);
                option.series[0].type='pie';
                option.title.text="<@label key='shutDownCauseChart.C'>停工原因分析</@label>";
                option.title.subtext="<@label key='equipmentCode.C'>设备编号</@label>："+eq.equipmentCode+"\n"+"<@label key='date.C'>日期</@label>："+$('#theDateSt', navTab.getCurrentPanel()).val()+"<@label key='to.C'>至</@label>"+$('#theDateEd', navTab.getCurrentPanel()).val();
                option.title.y='top';
                option.series[0].radius='55%';
                option.series[0].center=['50%', '60%'];
                option.tooltip.formatter="{a} <br/>{b} : {c} ({d}%)";
                option.noDataLoadingOption.text="<@label key='noshutDownData.C'>暂无停机记录</@label>";
                 option.series[0].data=[];
                if (data != null) {
                    $('#pie',navTab.getCurrentPanel()).addClass("pieborder");
                    
                       var legend = [];
                       $.each( detail, function(index) {
                           var val = detail[index];
                           legend.push(val.shutDownCauseText);
                           option.series[0].data[index] ={value: val.count, name: val.shutDownCauseText};
                           $('#pie',navTab.getCurrentPanel()).removeClass("pieborder");
                       });
                       option.legend.data=legend;
                }
                
                 require('echarts').init(document.getElementById('pie'),require('echarts/theme/blue')).setOption(option,true);
            }
        });
        
        $.DWZajax({
            url : hostUrl + "/emOee/getShutDownDetail",
            data : {
                'equipmentCode' : eq.equipmentCode,
                'theDateSt':$('#theDateSt', navTab.getCurrentPanel()).val(),
                'theDateEd':$('#theDateEd', navTab.getCurrentPanel()).val()
            },
            callback : function(data) {
                var detail = eval("(" + data + ")");
                oeeJs.appendDetail(detail);
            }
        });
        
    }

    var oeeJs={
                    appendDetail:function(_detail) {
                        $("#tb", navTab.getCurrentPanel()).empty();
                        var ht = "<table id='detail' class='table border' width='800px' layoutH='290' style='overflow: scroll;'>"
                                + "<thead><tr>"
                                + "<th width='100'><@label key='equipmentText.C'>设备描述</@label></th>"
                                + "<th width='100'><@label key='theDate.C'>作业日期</@label></th>"
                                + "<th width='100'><@label key='shutDownCauseText.C'>停机原因描述</@label></th>"
                                + "<th width='100'><@label key='downTime.C'>停机时长(分)</@label></th>"
                                + "<th width='100'><@label key='shutDownDateTime.C'>停机时间</@label></th>"
                                + "<th width='100' ><@label key='equipmentCode.C'>设备编号</@label></th>"
                                + "<th width='100'><@label key='shutDownCauseCode.C'>停机原因代码</@label></th>"
                                + "</tr></thead>" + "<tbody>";
                        for ( var i = 0; i < _detail.length; i++) {
                            ht += "<tr target='task_code'>"
                                    + "<td >"
                                    + ((typeof(_detail[i].equipmentText) ==  'undefined' )?'':_detail[i].equipmentText)
                                    + "</td>"
                                    + "<td>"
                                    + new Date(_detail[i].theDate).Format("yyyy-MM-dd")
                                    + "</td>"
                                    + "<td>"
                                    + ((typeof(_detail[i].shutDownCauseText) ==  'undefined' )?'':_detail[i].shutDownCauseText)
                                    + "</td>"
                                    + "<td>"
                                    + ((typeof(_detail[i].downTime) ==  'undefined' )?'':_detail[i].downTime)
                                    + "</td>"
                                    + "<td>"
                                    + ((typeof(_detail[i].startDateTime) ==  'undefined' )?'':new Date(_detail[i].startDateTime).Format("yyyy-MM-dd hh:mm:ss"))
                                    + "</td>"
                                    + "<td>"
                                    + _detail[i].equipmentCode
                                    + "</td>"
                                    + "<td>"
                                    + ((typeof(_detail[i].shutDownCauseCode) ==  'undefined' )?'':_detail[i].shutDownCauseCode)
                                    + "</td>"
                                    + "</tr>";
                        }
                        if(_detail.length==0)
                            {
                            ht+="<tr target='task_code'><td colspan='6' class='noData'>======<@label key='noListData.C'>列表无数据</@label>=====</td></tr>"
                            }
                        ht += "</tbody></table>";
                        $("#tb", navTab.getCurrentPanel()).append(ht);
                        $("#detail", navTab.getCurrentPanel()).jTable();
                         $(".grid",navTab.getCurrentPanel()).find("[layoutH]").layoutH();
            }
            
    }


</script>